<template>
    <div>
        <hd-tab :tabs="tabs"/>
        <el-form ref="form" :inline="false" :model="form" label-width="80px" size="normal">
            <el-card :body-style="{ padding: '20px' }" shadow="never">
                <div slot="header">
                    会员管理
                </div>
                <el-form-item label="名称">
                    <el-input v-model="form.name" placeholder="简介说明"></el-input>
                    <hd-error name="name"/>
                </el-form-item>
                <el-form-item label="会员类别">
                    <el-radio-group v-model="form.member" placeholder="联盟会员">
                        <el-radio :label=0>普通会员</el-radio>
                        <el-radio :label=1>联盟会员</el-radio>
                    </el-radio-group>
                    <hd-error name="member"/>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.mobile" placeholder="手机号"></el-input>
                    <hd-error name="mobile"/>
                </el-form-item>
                <el-form-item label="用户头像">
                    <hd-image v-model="form.avatar" :form="form" placeholder="用户头像"
                    ></hd-image>
                    <hd-error name="avatar"/>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email" placeholder="邮箱"></el-input>
                    <hd-error name="email"/>
                </el-form-item>
                <div v-if="form.member==1">
                    <el-form-item label="商户名称">
                        <el-input v-model="form.approve.merchant_name" placeholder="商户名称"></el-input>
                        <hd-error name="merchant_name"/>
                    </el-form-item>
                    <el-form-item label="类别">
                        <el-input v-model="form.approve.merchant_type" placeholder="类别"></el-input>
                        <hd-error name="merchant_type"/>
                    </el-form-item>
                    <el-form-item label="所属商圈">
                        <el-input v-model="form.approve.merchant_district" placeholder="所属商圈"></el-input>
                        <hd-error name="merchant_district"/>
                    </el-form-item>
                    <el-form-item label="商户预览图">
                        <hd-image v-model="form.approve.merchant_preview" placeholder="商户预览图"
                        ></hd-image>
                        <hd-error name="merchant_preview"/>
                    </el-form-item>
                    <el-form-item label="商户海报">
                        <hd-images v-model="form.approve.merchant_poster"
                                   placeholder="商户海报"
                                   @updateimage="updateimage"></hd-images>
                        <hd-error name="merchant_poster"/>
                    </el-form-item>
                    <el-form-item label="商户介绍">
                        <el-input v-model="form.approve.merchant_introduce" placeholder="商户介绍"
                                  type="textarea"></el-input>
                        <hd-error name="商户介绍"/>
                    </el-form-item>
                    <el-form-item label="商户文化">
                        <el-input v-model="form.approve.merchant_education" placeholder="商户文化"></el-input>
                        <hd-error name="merchant_education"/>
                    </el-form-item>

                    <el-form-item label="商户联系电话">
                        <el-input v-model="form.approve.merchant_phone" placeholder="商户联系电话"></el-input>
                        <hd-error name="merchant_phone"/>
                    </el-form-item>

                    <el-form-item label="商户地址">
                        <el-input v-model="form.approve.merchant_address" placeholder="商户地址"></el-input>
                        <hd-error name="merchant_address"/>
                    </el-form-item>

                    <el-form-item label="经纬度">
                        <hd-coordinates ref="coordinates"
                                        v-model="form.approve.merchant_latitudeAndLongitude"></hd-coordinates>
                        <hd-error name="merchant_latitudeAndLongitude"/>
                    </el-form-item>
                </div>


                <el-button type="primary" @click="onSubmit">提交</el-button>

            </el-card>
        </el-form>

    </div>
</template>

<script>
import tabs from './tabs'

const approve = {
    merchant_name: '', merchant_type: null,
    merchant_district: null, merchant_poster: [],
    merchant_introduce: null, merchant_education: null,
    merchant_phone: null, merchant_address: null,
    merchant_latitudeAndLongitude: [0, 0],
}
export default {
    route: false,
    props: ['id'],
    data() {
        return {
            tabs,
            form: {}
        }
    },
    async created() {
        if (this.id) {
            this.form = await this.axios.get(`user/${this.id}`)
            if (this.form.approve == null) {
                this.form = Object.assign(this.form, {approve: approve})
            }
        } else {
            this.form = Object.assign({}, {approve: approve})
        }
    },
    methods: {
        updateimage(imgs) {
            this.form.approve.merchant_poster = imgs
        },
        async onSubmit() {
            const url = this.id ? `user/${this.id}` : `user`
            await this.axios[this.id ? 'put' : 'post'](url, this.form)
            // this.$router.push({name: 'admin.user.normal'});
        }
    }
}
</script>

<style>

</style>
